import React,{Component} from 'react'
import { Toast, List, InputItem, WhiteSpace, Button, } from 'antd-mobile';
import { createForm } from 'rc-form'
import utils from '../../common/utils'
class RegisterForm extends Component{
    constructor(props) {
        super(props)
        this.state = {
          hasError: false,
        }
      }

    submit = () => {
        this.props.form.validateFields((errors, value) => {
        
            console.log(errors,value)
            if (errors) {
              this.setState({hasError: true})
            } else {
              this.props.register(value)
            }
        });
    }
        
    render() {
        const { getFieldProps, getFieldError} = this.props.form,
            hasError = this.state.hasError,
            invite_code = utils.getQueryString('invite_code')

        return (
         <div className='register-box'>
            <h3>注册</h3>
            <input type='hidden'
                {...getFieldProps('openid', {
                    initialValue: this.props.openid
                })} 
            />
             <input type='hidden'
                {...getFieldProps('invite_code', {
                    initialValue: invite_code
                })} 
            />
            
            <List>
                <InputItem
                    placeholder="安全邮箱"
                    name="email"
                    {...getFieldProps('email',{
                        rules: [{required: true}]
                    })}
                ></InputItem>
                {getFieldError('email')&&hasError?<div className='err-msg'>{getFieldError('email')}</div>: null }
            </List>
            <WhiteSpace />
           
            <List>
                <InputItem
                    {...getFieldProps('password')}
                    placeholder="密码"
                    name="password"
                    type='password'
                ></InputItem>
                {getFieldError('password')&&hasError?<div className='err-msg'>{getFieldError('password')}</div>: null }
            </List>
            <WhiteSpace />
           
            <List>
                <InputItem
                    placeholder="确认密码"
                    name="password_confirmation"
                    type='password'
                    {...getFieldProps('password_confirmation',{
                        rules: [{required: true}]
                    })}
                ></InputItem>
                {getFieldError('password_confirmation')&&hasError?<div className='err-msg'>{getFieldError('password_confirmation')}</div>: null }
            </List>
            <WhiteSpace />

            <WhiteSpace size="xl" />
            <Button className="btn btn-primary" type="primary" onClick={this.submit}>注册</Button>
            <WhiteSpace size="xl" />
         </div>
        );
  }
}

export default createForm()(RegisterForm);